import React, { useState, useRef, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import classNames from 'classnames'
import { delTodo } from '../../store/actions'
import { changeStatus, modifyTodo } from '../../store/actions/todo'
import { ESCAPE_KEY, ENTER_KEY } from '../../constants'
export default function TodoItem({ item }) {
  const dispatch = useDispatch()
  const inputRef = useRef()
  // 定义一个 currentId
  const [currentId, setCurrentId] = useState('')
  // !#1
  const [currentName, setCurrentName] = useState('')
  // 根据 id 删除 item
  const handleDel = (id) => dispatch(delTodo(id))
  // 修改选中状态
  const handleChangeStatus = (id) => dispatch(changeStatus(id))
  // 双击的回调
  const handleDBLLable = (id) => {
    setCurrentId(id)
    // !#3 双击回显
    setCurrentName(item.name)
  }
  // currentId 变化完毕后获取焦点
  useEffect(() => inputRef.current.focus(), [currentId])
  // 失去焦点的时候
  const handleBlur = () => {
    setCurrentId('')
    // !#4 离开时候也把 currentName 变成默认的空值
    setCurrentName('')
  }
  // 不要直接用传过来的 item.name 和编辑框进行绑定，因为一旦直接进行绑定了，其实输入的时候就进行了修改，我期望敲回车的时候才进行修改
  const handleKeyUp = (e) => {
    // 如果按下的是 ESC 就退出修改
    if (e.keyCode === ESCAPE_KEY) return handleBlur()
    if (e.keyCode === ENTER_KEY) {
      if (currentName.trim().length === 0) return alert('内容不能为空')
      dispatch(modifyTodo(item.id, currentName))
      // 隐藏 input 编辑框，把 currentName 变成初始值
      handleBlur()
    }
  }
  return (
    <li
      className={classNames({
        completed: item.done,
        editing: item.id === currentId,
      })}
    >
      <div className='view'>
        <input
          className='toggle'
          type='checkbox'
          checked={item.done}
          onChange={() => handleChangeStatus(item.id)}
        />
        <label onDoubleClick={() => handleDBLLable(item.id)}>{item.name}</label>
        <button className='destroy' onClick={() => handleDel(item.id)}></button>
      </div>
      {/* //!#2 */}
      <input
        className='edit'
        value={currentName}
        onChange={(e) => setCurrentName(e.target.value)}
        ref={inputRef}
        onBlur={handleBlur}
        onKeyUp={handleKeyUp}
      />
    </li>
  )
}
